<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<!-- <el-button type="text" icon="el-icon-plus" @click="editProduct">新建小区</el-button> -->
			</div>
			<el-form-item label="时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" size="small">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="待办事项">
				<el-input v-model="queryParams.productName" placeholder="待办事项" clearable size="small"
					@keyup.enter.native="getList" />
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column label="待办事项" align="center" prop="name" fixed="left"></el-table-column>
			<el-table-column label="时间" align="center" prop="desc"></el-table-column>
			<el-table-column label="操作" align="center" width="150" fixed="right">
				<template slot-scope="scope">
					<!-- <el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
						审批
					</el-button> -->
					<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
						详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
		<!-- 详情 -->
		<el-dialog title="详情" :visible.sync="detailModel" :close-on-click-modal="false" :close-on-press-escape="false"
			width="60%">
			<el-form ref="detailForm" :model="detailForm" label-width="100px" :inline="true" class="detailForm">
				<el-row>
					<el-col :span="12">
						<el-form-item label="审批事项:">
							{{detailForm.productName}}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="审批结果" prop="state">
							<el-radio v-model="productForm.state" label="0">同意</el-radio>
							<el-radio v-model="productForm.state" label="1">拒绝</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="审批意见:">
							{{detailForm.productDesc}}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
				<el-button @click="detailModel = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 上传文件
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					startTime: "",
					endTime: "",
					productName: "",
				},
				productForm: {
					productName: '',
					productUser: '',
					productDesc: '',
					code: '',
					describe: ''
				},
				detailForm: {
					productForm: '',
					productUser: '',
					describe: ''
				},
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				productModel: false,
				detailModel: false,
				rules: {
					productName: [{
						required: true,
						message: "请您输入小区名称",
						trigger: "blur"
					}],
				},
				fileHeaders: fileUpdata.headers(),
				fileUrl: process.env.VUE_APP_BASE_API + `/vapi/file/uploadfile?objectName=workOrder`,
				fileInfo: '',
				fileList: []
			};
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			// 下载文件
			downLoadProjectFile(row) {
				this.getBlob(row.filePath, (blob) => {
					this.saveAs(blob, row.fileName)
				})
			},
			getBlob(url, cb) {
				var xhr = new XMLHttpRequest;
				xhr.open('GET', url, true);
				xhr.responseType = 'blob';
				xhr.onload = function() {
					if (xhr.status == 200) {
						cb(xhr.response)
					}
				}
				xhr.send();
			},
			saveAs(blob, fileName) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, fileName)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = fileName
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 删除文件
			deleteProjectFile(row) {
				var that = this;
				that.$message.success("文档操作成功")
			},
			handleExceed(files, fileList) {
				this.$message.warning(`最多可上传 1 个附件，您已超限`)
			},
			handleAvatarSuccess(res, file, fileList, type) {
				var that = this;
				that.fileInfo = file;
				that.$message.success("文档上传成功")
			},
			handleAvatarError(res, file) {
				this.$message.error("文件上传失败，请重试")
			},
			// 修改小区
			editProduct(row) {
				var type = "";
				if (row.id) {
					// 修改
					type = "edit";
					this.productForm = row;
				} else {
					// 新增
					type = "add";
					this.productForm = {};
				}
				this.dealType = type;
				this.productModel = true;
			},
			// 查看小区详情
			lookProduct(row) {
				this.detailForm = row;
				this.detailModel = true;
			},
			// 删除小区
			delProduct(row) {
				this.$message.success("小区操作成功");
			},
			//提交小区
			submitProduct() {
				this.$message.success("小区操作成功");
			},
			//初始化列表
			getList() {
				this.list = [{
					name:"小区1",
					desc:"描述1",
				},
				{
					name:"小区2",
					desc:"描述2",
				}]
				this.loading = false;
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},

		}
	}
</script>
<style scoped lang='scss'>
	.editBtn span {
		color: red;
	}

	.deleteBtn span {
		color: red;
	}

	.detailBtn span {
		color: red;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100%;
	}

	.detailForm {
		.el-form-item {
			margin-bottom: 0px;
		}
	}
</style>